(function (fruit, util) {
    fruit.ui.define("fruit.ui.AbstractTab", {
        events: ["CreateItem"],
        methods: {
            onInit: function () {
                this.inherited();
                this._tabMap = {};
            },
            setItems: function (value) {
                if (util.isArray(value)) {
                    util.each(value, function (item, index) {
                        if (util.isObject(item)) {
                            if (item.title) {
                                this.createTitle(item.title);
                            }
                            if (item.content) {
                                this.createContent(item.content);
                            }
                        }
                        this.createTabItem(item);
                        this._tabMap[item.id || index] = item;
                    }, this);
                }
            },
            createTitle: function (title) {

            },
            createContent: function (content) {

            },
            createTabItem: function (item) {
                this.fire("CreateItem");
            },
            getItem: function (id) {
                return this._tabMap[id];
            }

        }
    });

    fruit.ui.define("fruit.ui.Tab", fruit.ui.AbstractTab, {
        events: ['TabChange', 'SetTabs'],
        view: {
            props: {
                'class': 'f-tab',
                visible: "{#!!tabs}"
            },
            content: [
                {
                    name: 'header',
                    tag: 'ul',
                    props: {
                        'class': 'f-tab-wrap',
                        items: '{#tabs}',
                        template: {
                            tag: 'li',
                            props: {
                                'class': 'f-tab-item'
                            },
                            content: {
                                tag: 'a',
                                content: [
                                    {
                                        tag: 'i',
                                        props: {
                                            'class': '{icon}'
                                        }
                                    },
                                    {
                                        tag: 'span',
                                        content: '{name}'
                                    }
                                ]
                            }
                        }
                    },
                    events: {
                        'click': '{#_tabClick}'
                    }
                },
                {
                    name: 'content',
                    props: {
                        'class': 'f-tab-content',
                        items: '{#tabs}',
                        template: {
                            props: {
                                'class': 'f-tab-content-body'
                            },
                            content: '{content}'
                        }
                    }
                }
            ]
        },
        properties: {
            tabs: {
                getter: function () {
                    return this._tabs;
                },
                setter: function (value) {
                    this._tabs = value;
                    this.notifyPropertyChanged('tabs');
                    this.notifyPropertyChanged('activatedItemIndex');
                    this.active();
                }
                //observable: true
            },
            activatedItemIndex: {
                getter: function () {
                    return this._activatedItemIndex || 0;
                },
                setter: function (value) {
                    this._activatedItemIndex = value;
                }
            },
            tabGenerator: {
                value: function (itemEl, itemModel) {
                    var content = itemModel.content;
                    itemEl.model(itemModel);
                    if (util.isObject(content)) {
                        var comp;
                        if (util.isFunction(content)) {
                            comp = new content();
                        } else {
                            comp = content instanceof fruit.ui.Component ? content : fruit.ui.viewEngine.create(content);
                        }
                        comp.owner(this);
                        itemEl.empty();
                        itemEl.appendChild(comp);
                    }
                    return itemEl;
                },
                observable: true
            }
        },
        methods: {
            onInit: function () {
                this.inherited();


                var self = this;
                this._tabMap = {};
                this._tabArray = [];

                this.$("content").itemGenerator(function (itemEl, itemModel) {
                    var generator = self.tabGenerator();
                    var item = generator.call(this, itemEl, itemModel);
                    var comp = item.childAt(0);
                    var id = itemModel.id || comp.$id;
                    self._tabMap[id] = comp;
                    self._tabArray.push(comp);
                    item.setAttribute("id",id);
                    return item;
                });
            },
            _tabClick: function (sender, event) {
                var self = this;
                var target = event.target;
                var activeIndex = 0;
                this.$("header").children(function (child, index) {
                    if (child._element.contains(target)) {
                        activeIndex = index;
                    }
                });
                this.active(activeIndex);
            },
            active: function (index) {

                var prevActivatedItem = this.activatedItemIndex();
                var activatedItem = index != null ? index : prevActivatedItem;
                var currentContent = this.$("content").childAt(activatedItem);


                this.inactive();


               // this.$("header").childAt(prevActivatedItem).removeClass("f-tab-item-selected");
                //this.$("content").childAt(prevActivatedItem).removeClass("f-tab-content-body-selected");

                this.$("header").childAt(activatedItem).addClass("f-tab-item-selected");
                currentContent.addClass("f-tab-content-body-selected");

                var comp = currentContent.childAt(0);
                if (prevActivatedItem != activatedItem && comp && comp.onOpen) {
                    comp.onOpen.call(comp);
                }

                this.activatedItemIndex(activatedItem);
                this.fire("TabChange", currentContent);


            },
            inactive: function () {
                var prevActivatedItem = this.activatedItemIndex();
                this.$("header").childAt(prevActivatedItem).removeClass("f-tab-item-selected");
                this.$("content").childAt(prevActivatedItem).removeClass("f-tab-content-body-selected");
                this.activatedItemIndex(-1);

                var comp = this.$("content").childAt(prevActivatedItem).childAt(0);
                if (comp && comp.onClose) {
                    comp.onClose.call(comp);
                }

            },
            appendTo: function (args) {
                this.inherited(args);
                this.active();
            },
            getTabContent: function (id) {
                return this._tabMap[id];
            },
            getTabContentByIndex: function (index) {
                return this._tabArray[index];
            }
        }

    });


})(fruit, fruit.util);